<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>JSON Form Playground</title>
    <style>
      @import url("../deps/opt/bootstrap.css");
      @import url("../deps/opt/bootstrap-wysihtml5.css");
      @import url("../deps/opt/spectrum.css");

      h2 { font-weight: 200; margin-top: 0; }

      .tagline {
        padding: 10px;
        font-weight: 200;
        margin-top: -1em;
      }

      .footer {
        margin-top: 40px;
        padding: 10px 0.5em;
        border-top: 1px solid #E5E5E5;
      }

      #form .add-on {
        border: none;
        background-color: inherit;
      }

      .expandable > legend:before {
        content: '\25B8';
        padding-right: 5px;
      }
      .expanded > legend:before {
        content: '\25BE';
      }

      ._jsonform-array-buttons {
        margin-left: 25px;
      }

      .jsonform-required > label:after {
        content: ' *';
        color: red;
      }

      form.jsonform-hasrequired:after {
        content: '* Required field';
        display: block;
        color: red;
        padding-top: 1em;
      }
    </style>
  </head>
  
  <body>
    <nav class="navbar navbar-inverse navbar-static-top">
        <div class="container">
          <a class="navbar-brand" href="#">JSON Form Playground</a>
          <div>
            <ul class="nav navbar-nav">
              <li><a href="#">Home</a></li>
              <li><a href="https://github.com/jsonform/jsonform/wiki">Documentation</a></li>
              <li><a href="https://github.com/jsonform/jsonform">Project on github</a></li>
            </ul>
          </div>
        </div>
    </nav>

    <div class="container">
      <div class="tagline">
        <p>Choose a JSON Form example below and check the generated form. Refer to the <a href="https://github.com/jsonform/jsonform/wiki">documentation</a> for details and directions to extend the form.</p>
      </div>

      <div class="row">
        <div class="col-md-5">
          <form id="form" class="form-vertical"></form>
        </div>
        <div class="col-md-7">
          <h2>Generated form</h2>
          <div id="result" class="well">(please wait)</div>
        </div>
      </div>

    </div>
    <footer class="footer">
      <div class="container">
      <p>Originally created by <a href="https://joshfire.com">Joshfire</a>.</p>
      <p><a href="https://github.com/jsonform/jsonform" title="JSON Form library code">Code</a> available on github, licensed under the <a href="https://raw.github.com/jsonform/jsonform/master/LICENSE">MIT License</a> — See <a href="https://github.com/jsonform/jsonform/wiki#wiki-deps">dependencies</a> for the list of libraries and licenses used by JSON Form.</p>
      </div>
    </footer>

    <script src="../deps/jquery.min.js"></script>
    <script src="../deps/underscore.js"></script>
    <script src="../deps/opt/jsv.js"></script>
    <script src="../deps/opt/jquery-ui.js"></script>
    <script src="../deps/opt/bootstrap-dropdown.js"></script>
    <script src="../deps/opt/bootstrap-wysihtml5.js"></script>
    <script src="../deps/opt/spectrum.js"></script>
    <script src="../deps/opt/ace/ace.js"></script>
    <script src="../deps/opt/ace/mode-json.js"></script>
    <script src="../deps/opt/ace/mode-html.js"></script>
    <script src="../deps/opt/ace/mode-css.js"></script>
    <script src="../deps/opt/ace/mode-javascript.js"></script>
    <script src="../deps/opt/ace/mode-less.js"></script>
    <script src="../deps/opt/ace/mode-markdown.js"></script>
    <script src="../deps/opt/jquery.transloadit2.js"></script>

    <script src="../lib/jsonform.js"></script>

    <script src="playground.js"></script>
  </body>
</html>
